<!--
    __  _____  _________    
   /  |/  /  |/  / ____/____
  / /|_/ / /|_/ / /   / ___/
 / /  / / /  / / /___(__  ) 
/_/  /_/_/  /_/\____/____/  
-->
{% from 'macros.html' import render_nav_item %}
{% from 'macros.html' import link_field %}
<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>{% block title %}{% endblock %} · MMCs</title>
    <link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}">
    {% block styles %}
        {{ bootstrap.load_css() }}
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flat-ui/2.3.0/css/flat-ui.min.css"/>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/open-iconic/1.1.1/font/css/open-iconic-bootstrap.min.css" />
        <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
    {% endblock styles %}
</head>

<body>
{% block navbar %}
    <nav class="navbar navbar-expand-lg bg-light">
        <div class="container">
            <a class="navbar-brand" href="{{ url_for('front.index') }}">
                <img src="{{ url_for('static', filename='navbar-brand.ico') }}" alt="MMCs" width="80">
            </a>
            <button class="navbar-toggler" type="button" data-toggle="collapse"
                    data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
                    aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <div class="navbar-nav mr-auto">
                    {{ render_nav_item('front.index', _('Home'), "oi oi-home") }}
                    {{ render_nav_item('front.about', _('About'), "oi oi-bookmark") }}
                </div>
                {% if not current_user.is_authenticated %}
                    <div class="navbar-nav nav-item ml-auto">
                        <a class="btn btn-outline-success" href="{{ url_for('auth.login') }}">
                            {{ _('Welcome to MMCs') }}
                        </a>
                    </div>
                {% endif %}
                <div class="dropdown nav-item navbar-nav">
                    <a class="nav-link dropdown-toggle" data-toggle="dropdown">
                        <span class="oi oi-globe"></span> {{ _('Language') }}
                    </a>
                    <div class="dropdown-menu" role="menu">
                        <a class="dropdown-item"
                           href="{{ url_for('front.set_locale', locale='zh_Hans_CN') }}">简体中文</a>
                        <a class="dropdown-item"
                           href="{{ url_for('front.set_locale', locale='en_US') }}">English</a>
                    </div>
                </div>
                {% if current_user.is_authenticated %}
                    <div class="dropdown nav-item navbar-nav">
                        <a class="nav-link dropdown-toggle" data-toggle="dropdown">
                            <span class="oi oi-person"></span>
                        </a>
                        <div class="dropdown-menu" role="menu">
                            <h6 class="dropdown-header">{{ _('Logged in as') }} {{ current_user.realname }}</h6>
                            <a class="dropdown-item" href="{{ url_for('backstage.edit_profile') }}">
                                <span class="oi oi-cog"></span> {{ _('Settings') }}</a>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" href="{{ url_for('auth.logout', next=request.full_path) }}">
                                <span class="oi oi-account-logout"></span> {{ _('Logout') }}</a>
                        </div>
                    </div>
                {% endif %}
            </div>
        </div>
    </nav>
{% endblock navbar %}

<main>
    <div class="container">
        {% for message in get_flashed_messages(with_categories=True) %}
            <div class="alert alert-{{ message[0] }}">
                <button type="button" class="close" data-dismiss="alert">
                    <span class="oi oi-delete"></span>
                </button>
                {{ message[1] }}
            </div>
        {% endfor %}

        {% block content %}
        {% endblock content %}
    </div>

    <footer class="footer">
        <div class="container">
            <div class="row">
                <div class="col-6">
                    <p class="float-left">
                        <small> &copy; {{ current_year() }}
                            <a href="http://sxjm.ncst.edu.cn"
                               title="{{ _('North China University of Science and Technology University Mathematical Modeling Association') }}"
                               data-toggle="tooltip">
                                NCUST-MMA /</a>
                            {{ link_field("Zero", "https://github.com/Zeroto521", "Written by Zeroto521") }}
                        </small>
                    </p>
                </div>
                <div class="col-6">
                    <p class="float-right">
                        <small>
                            <a title="{{ _('North China University of Science and Technology University Mathematical Modeling Competition system') }}"
                               data-toggle="tooltip">{{ _('Mathematical Modeling Competition system') }}</a>
                        </small>
                    </p>
                </div>
            </div>
        </div>
    </footer>
</main>

{% block scripts %}
    {{ bootstrap.load_js() }}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/flat-ui/2.3.0/js/flat-ui.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/flat-ui/2.3.0/js/vendor/respond.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("[data-toggle='tooltip']").tooltip();
        });
    </script>
    <script src="{{ url_for('static', filename='js/script.js') }}"></script>
{% endblock scripts %}
</body>

</html>
